<script setup lang="ts">
import { onBeforeMount, ref, inject } from 'vue'
import CommonTitle from '@components/Common/CommonTitle.vue';
import { useRouter } from 'vue-router';
import { getUserMusic, getMusicCD } from '@api'
import { Music, MusicList, popMessageKey, popMessage } from '@/type';
import { useStore } from '@store/index';
import { storeToRefs } from 'pinia';
const store = useStore()
const BASEURL = store.getBaseUrl()
const isLogin = storeToRefs(store).isLogin
const router = useRouter()
// 用户上传的音乐
const musicList = ref<Music[]>()
// 用户上传的音乐
const musicCD = ref<MusicList[]>()
const popmessage = inject(popMessageKey) as popMessage
const toMusicUpload = () => {
    router.push({
        name: 'Upload',
        params: {
            editType: 'uploadMusic',
            id: 0
        }
    })
}
const toMusicEdit = (musicId: string) => {
    router.push({
        name: 'Upload',
        params: {
            editType: 'editMusic',
            id: musicId
        }
    })
}
const toCDCreate = () => {
    router.push({
        name: 'Upload',
        params: {
            editType: 'uploadCd',
            id: 0
        }
    })
}
const toCDEdit = (CDId: string) => {
    router.push({
        name: 'Upload',
        params: {
            editType: 'editCd',
            id: CDId
        }
    })
}
onBeforeMount(() => {
    if (isLogin.value != 1) {
        popmessage("未登录", 'error')
        router.push("/")
    }
    getUserMusic().then(res => {
        if (res.data.code == 1) {
            musicList.value = res.data.data

        }
    })
    getMusicCD().then(res => {
        if (res.data.code == 1) {
            musicCD.value = res.data.data
        }
    })
})
const toMusicListPage = (id: number | string) => {
    router.push({
        name: 'musicList',
        params: {
            musicListId: id,
            disableSlide: 0
        }
    })
}
</script>
<template>
    <div class="content">
        <CommonTitle :click="toMusicUpload" type="music" title="我的音乐"
            :num="musicList?.length != undefined ? musicList?.length : 0" />
        <div class="List">
            <ul>
                <template v-if="musicList">
                    <li class="item" v-for="music of musicList">
                        <img class="Image" :src="BASEURL + '/static/image/' + music.image">
                        <div class="Info">
                            <p class="Title">{{ music.title }}</p>
                            <p class="Text">所属专辑:{{ music.cdname ? music.cdname : '暂无' }}</p>
                        </div>
                        <div class="function">
                            <div @click="toMusicEdit(music.musicId)" class="edit">
                                <img class="icon" src="../../assets/edit.svg">
                                <a>编辑</a>
                            </div>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
        <CommonTitle v-if="musicCD" :click="toCDCreate" type="cd" title="我的专辑"
            :num="musicCD?.length != undefined ? musicCD?.length : 0" />
        <div class="List">
            <ul>
                <template v-if="musicCD">
                    <li class="item" v-for="CD of musicCD">
                        <img @click="toMusicListPage(CD.id as string)" class="Image"
                            :src="BASEURL + '/static/image/' + CD.image">
                        <div @click="toMusicListPage(CD.id as string)" class="Info">
                            <p class="Title">{{ CD.title }}</p>
                            <p class="Text">单曲:{{ CD.musicNum }}</p>
                        </div>
                        <div class="function">
                            <div class="edit" @click="toCDEdit(CD.id as string)">
                                <img class="icon" src="../../assets/edit.svg">
                                <a>编辑</a>
                            </div>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>
<style lang="css" scoped>
.icon {
    text-align: center;
    height: 18px;
}

.edit:hover {
    border: 1px solid var(--blue-style);
}

.edit {
    border: 1px solid #999;
    padding: 5px 10px;
    width: 50px;
    height: 20px;
    display: flex;
    align-items: center;
}

.function {
    flex: 1;
    margin-right: 20px;
    display: flex;
    justify-content: end;
    align-self: center;
}

.Text {
    font-size: 12px;
    color: #666;
}

.Title {
    font-weight: 600;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
}

.Info {
    height: var(--singer-avatar-size);
    margin-left: 15px;
    display: flex;
    flex-direction: column;
}

.Info p {
    margin-top: 0;
    margin-bottom: 0;
}

.List .Image {
    height: var(--singer-avatar-size);
    width: var(--singer-avatar-size);
}

.List .item {
    display: flex;
    cursor: pointer;
}

.List li {
    list-style: none;
    padding: 5px 0;
    border-bottom: 1px solid #d5d5d5;
}

.List ul {
    padding-left: 0;
}
</style>